<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
		
        <div class="container mt-1">
          <el-form inline size="small">
			<div class="flex items-center search_form">
				 <div style="margin-left: 10px;">
					<el-button type="primary" size="mini" @click="addBtn">添加</el-button>
				 </div>
			</div>
			
           
			
           
          </el-form>
        </div>
      </div>
      <el-table
        :data="result"
        style="width: 100%"
        size="mini"
        height="600px"
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
      >
        <el-table-column   align="center"    prop="post_name"    label="名称"></el-table-column>
            <el-table-column  align="center"   prop="add_time"  label="添加时间"></el-table-column>
			<el-table-column  align="center"   prop="update_time"  label="修改时间"></el-table-column>
			<el-table-column  label="状态"  align="center">
				<template slot-scope="scope">
				   <el-switch
				     v-model="scope.row.status"
					 :inactive-value="'0'"
					 :active-value="'1'"
					 @change="changeData(scope.row)"
					 >
				   </el-switch>
				</template>
			</el-table-column>
            <el-table-column  label="操作"  fixed="right"  align="center">
                <template slot-scope="scope">
                    <el-button @click="editAuth(scope.row)" 
						type="text" size="small">
						编辑权限
					</el-button>
                    <el-button type="text" size="small" 
						@click="updateData(scope.row)">
						编辑
					</el-button>
                </template>
            </el-table-column>
      </el-table>
	  <div class="page">
	              <el-pagination
	                      background
	                      @size-change="pageChange"
	                      @current-change="handleCurrentChange"
	                      :current-page="page"
	                      :page-size="pageSize"
	                      layout="total, sizes, prev, pager, next, jumper"
	                      :total="page_totle">
	              </el-pagination>
	          </div>
    </el-card>
	
	<!-- 新增角色 -->
	<el-dialog
		        :title="title"
				:close-on-click-modal="false"
		        :visible.sync="isShow"
		        width="700px"
		>
		    <el-form  :model="info" label-width="120px">
		        <el-form-item label="名称">
		            <el-input size="small" v-model="info.post_name" style="width: 500px"></el-input>
		        </el-form-item>
			<el-form-item label="状态">
			    <el-radio-group v-model="info.status">
			       <el-radio label="0">不启用</el-radio>
			        <el-radio label="1">启用</el-radio>
			     </el-radio-group>
			</el-form-item>
		    </el-form>
		    <span slot="footer" class="dialog-footer">
		            <el-button @click="isShow = false" size="mini">取 消</el-button>
		            <el-button  type="primary" size="mini" @click="confirm">
						确 定
					</el-button>
		        </span>
		</el-dialog>
        <el-dialog
	           title="编辑权限"
	   		:close-on-click-modal="false"
	           :visible.sync="authShow"
	           width="500px"
	   >
	       <auth :id="id" @close="authShow=false" v-if="authShow" />
	   </el-dialog>
  </div>
</template>
<script>
import auth from './components/auth.vue'
  export default {
    components:{
		auth
	},
    data() {
      return {
        title:'新增',
		 result:[],
        isShow:false,
        title:'添加',
        info:{
            id:undefined,
            post_name:'',
            status:'1'
        },
        authShow:false,
        id:0,
		page:1,
		pageSize:10,
		page_totle:0,
      }
    },
    mounted() {
		this.lodeList()
    },
    methods: {
      changeData(row){
				for(let i in this.info){
					this.info[i] = row[i]
				}
				this.confirm()
			},
			editAuth(row){
				this.id = row.id
				this.authShow = true
			},
			updateData(row){
				for(let i in this.info){
					this.info[i] = row[i]
				}
				this.isShow = true
				this.title = '修改'
			},
			confirm(){
                this.$api.post('/system/addEditPost',this.info).then(result=>{
                    if(result.code == 200){
						this.$message.success(result.msg)
						this.isShow = false
						this.lodeList()
					}else{
						this.$message.error(result.msg)
					}
                })
			},
            addBtn(){
				this.isShow = true
				this.title = '新增'
				this.info = {
					id:undefined,
					post_name:'',
					status:'1'
				}
			},
            lodeList(){
                let params = {
                    page:this.page,
                    pageSize:this.pageSize
                }
                this.$api.post('/system/postJobList',params).then(result=>{
                    if(result.code == 200){
                        this.result = result.data.result
                        this.page_totle = result.data.count
                    }
                })
            },
      
    }
  }
</script>
